<template>
  <el-table :data="cartList" style="width: 100%;border-radius: 5px;">
    <!-- <el-table-column type="index" width="50" label="#" align="left"></el-table-column> -->
    <el-table-column label="商品" prop="name" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" label="数量" prop="nums" width="60">
      <template slot-scope="scope">
        <el-link v-if="scope.row.type === 'oil'" disabled type="primary">{{ scope.row.nums }}升</el-link>
        <el-link v-else type="primary" @click="handleNumsChange(scope.row)">{{ scope.row.nums }}</el-link>
      </template>
    </el-table-column>
    <el-table-column align="center" label="单价" prop="price" width="80"></el-table-column>
    <el-table-column align="center" label="小计" prop="amount" width="80">
      <template slot-scope="scope">
        <el-link v-if="scope.row.type === 'oil'" disabled type="primary">{{ scope.row.amount }}</el-link>
        <el-link v-else type="primary" @click="handleAmountChange(scope.row)">{{
            scope.row.amount
          }}
        </el-link>
      </template>
    </el-table-column>
    <el-table-column align="center" fixed="right" label="操作" width="80">
      <template slot-scope="scope">
        <el-button icon="el-icon-delete" size="mini" type="danger" @click="handleRemove(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import {mapGetters} from 'vuex'
import {unlockFuelRecord} from '@/api/settle'

export default {
  name: 'CartDataTable',
  data () {
    return {}
  },
  computed: {
    ...mapGetters([
      'stationId',
      'operator',
      'stockList',
      'cartList'
    ])
  },
  mounted () {
    console.log('CartDataTable mounted')
  },
  methods: {
    handleNumsChange (row) {
      console.log('handleNumsChange')
      console.log(row)
      this.$prompt('请输入数量', '手动修改数量【键盘上下键可快速增减】', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'number',
        inputValue: row.nums,
        inputErrorMessage: '数字格式不正确'
      }).then(({value}) => {
        console.log(value)
        console.log(Number.isInteger(value))
        // 调用dispatch更新数量
        if (value && value > 0 && Number.isInteger(parseInt(value))) {
          let data = JSON.parse(JSON.stringify(row))
          data.nums = value
          this.$store.dispatch('setCartItemNums', data)
          this.clearCouponSelectAndAutoSelect()
        } else {
          this.$message.warning('数量不能小于1并且是整数！')
        }
      }).catch(() => {
        console.log('取消输入')
      })
    },
    handleAmountChange (row) {
      console.log('handleAmountChange')
      console.log(row)
      this.$prompt('请输入售价金额', '手动修改金額【键盘上下键可快速增减】', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'number',
        inputErrorMessage: '数字格式不正确'
      }).then(({value}) => {
        console.log(value)
        if (value) {
          const data = JSON.parse(JSON.stringify(row))
          data.amount = value
          // 调用dispatch更新数量 金额/售价 = 数量 如果百分位有值则会向上取整
          data.nums = Math.ceil(value / Number.parseFloat(data.price))
          this.$store.dispatch('setCartItemNums', data)
          this.clearCouponSelectAndAutoSelect()
        } else {
          this.$message.warning('金额不能为空！')
        }
      }).catch(() => {
        console.log('取消输入')
      })
    },
    handleRemove (row) {
      console.log('handleRemove')
      console.log(row)
      this.$store.dispatch('removeFromCartList', row)
      // 如果是油品，则需要把该笔记录解锁
      if (row.type === 'oil') {
        unlockFuelRecord({id: row.id, stationId: this.stationId, operator: this.operator})
      }
      this.clearCouponSelectAndAutoSelect()
    },
    clearCouponSelectAndAutoSelect () {
      this.$store.dispatch('updateCouponSelect', {})
      setTimeout(() => {
        this.$bus.$emit('autoSelectCoupons')
      }, 200)
    }
  },
  watch: {
    cartList: function (newVal, oldVal) {
      if (newVal.length !== 0) {
        setTimeout(() => {
          let tmpList = newVal.filter(item => item.type === 'goods')
          if (tmpList.length > 0) {
            this.handleAmountChange(tmpList[tmpList.length - 1])
          }
        }, 200)
      }
    }
  }
}
</script>

<style>

</style>
